import React from "react";
import { observer, inject } from "mobx-react";
import { Route, withRouter, Switch,Redirect } from "react-router-dom";
import { Tabs, Tools } from "weaver-mobile";
import { asyncComponent } from "react-async-component";
import GovernConstant from "../../util/index";
import ComSearchBar from "../governTools/comSearchBar";
import { toJS } from "mobx";
const getLabel = Tools.getLabel;
const coms = {
  MainListPage: asyncComponent({
    resolve: () => import("./pages/mainListPage")
  }),
  ComShare: asyncComponent({
    resolve: () => import("../governTools/comShare/comShare.js")
  }),
  ComDialogForm: asyncComponent({
    resolve: () => import("../governTools/comDialogForm/comDialogForm.js")
  })
};
//@inject("mainStore", "actionSheetStore")
@inject("mainStore")
@withRouter
@observer
//长列表容器组件
export default class Main extends React.Component {
  constructor(props) {
    super(props);
    this.containerRef = React.createRef();//19.1.24解决列表距离顶部样式问题
    this.goSearching = false;//即将搜索操作,目的减少不必要的接口请求
    this.state = {
      hei: 0,
      tabs: []
    };
  }
  componentWillMount() {
    const {
      selectKey,
      mainStore: { getSelectKey }
    } = this.props;
    getSelectKey(selectKey);
  }
  componentDidMount() {
    const {
      mainStore: { initDatas },
      location
    } = this.props;
    this.setPage(location.pathname);
    initDatas({ path: location.pathname }); //搜索时不在初始化该页面
    if (this.containerRef.current) {
      this.setState((prevState, props) => ({
        hei: this.containerRef.current.offsetHeight
      }));
    }
  }
  componentWillReceiveProps(nextProps) {
    let isgo = GovernConstant.getUrlCharCount(nextProps.history.location.pathname) < 3;
    if (isgo && nextProps.location.pathname !== this.props.location.pathname) {
      this.goSearching = nextProps.location.pathname.includes("advanced")
        ? true
        : false;
      const {
        mainStore: { initDatas, doInitDatasSign, clearState },
        location
      } = nextProps;
      this.setPage(location.pathname);
      clearState();
      !this.goSearching &&
        doInitDatasSign &&
        initDatas({ path: location.pathname }); //搜索时不在初始化该页面
    }
  }
  componentWillUnmount() {
    const {
      mainStore: { clearState }
    } = this.props;
    clearState();
  }
  //浏览器访问，点回退时确保tabs组件渲染正确
  setPage = pathname => {
    const {
      mainStore: { tabChange },
      match: { path },
      selectKey
    } = this.props;
    if (selectKey === "0" || selectKey === "1") {
      const name = {
        "/pro": ["/newduty", "/replace", "/monitor", "/matter"],
        "/task": ["/host", "/assist", "/finish", "/result"]
      };
      name[path].forEach((item, index) => {
        if (pathname.indexOf(item) > -1) {
          tabChange(index);
        }
      });
    } else {
      return false;
    }
  };
  tabClick = (tab, index) => {
    const {
      mainStore: { typeTab },
      history
    } = this.props;
    history.push(typeTab.tabArray[index].to);
  };
  render() {
    const {
      mainStore,
      match,
      location,
      selectKey,
      mainStore :{actionSheetStore: { getActionBtn }}
    } = this.props;
    const {
      listViewStore,
      page,
      tabChange,
      initDatas,
      getDataParams,
      apisFun,
      tabs,
    } = mainStore;
    const provider = { getActionBtn };
    let rountKey = GovernConstant.getUrlChar(location.pathname);
    const newProps = {initDatas,getDataParams,apisFun} ;
    let {hei} = this.state;

   
    return(
      <div className="g-main">
        <div className="g-main-head" style={{ height: hei }}>
          <div className="g-head-container" ref={this.containerRef}>
            <ComSearchBar {...newProps} tabKey={page} />
            {(selectKey === "0" || selectKey === "1") && (
              <Tabs
                tabs={tabs.slice()}
                //tabBarInactiveTextColor="#efe9e9"
                initialPage={0}
                page={page}
                onChange={(tab, index) => tabChange(index)}
                onTabClick={(tab, index) => this.tabClick(tab, index)}
                //tabBarInactiveTextColor="#efbbbd"
                //tabBarUnderlineStyle={{border: "1PX #fff solid"}}
              />
            )}
          </div>
        </div>
        <div className="g-main-body" style={{ paddingTop: hei,height: '80%' }}>
          <Switch>
            <Route
              key="share"
              path={`${match.path}/:parameter/share`}
              render={props => (
                <coms.ComShare />
              )}
            />
            <Route
              // key={rountKey}
              path={`${match.path}/:parameter/govern`}
              render={props => <coms.ComDialogForm />}
            />
            <Route
              key={rountKey}
              path={`${match.path}/:${rountKey}`}
              exact
              render={props => (
                <coms.MainListPage
                  listViewStore={listViewStore}
                  provider={provider}
                />
              )}
            />
          </Switch>
        </div>
      </div>
    );
  }
}
